{% extends "base.html"%}

{% block custom_style %}
<style>
  body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }

  body {
    background: #fff;
  }

  .input-field input[type=date]:focus + label,
  .input-field input[type=text]:focus + label,
  .input-field input[type=email]:focus + label,
  .input-field input[type=password]:focus + label {
    color: #e91e63;
  }

  .input-field input[type=date]:focus,
  .input-field input[type=text]:focus,
  .input-field input[type=email]:focus,
  .input-field input[type=password]:focus {
    border-bottom: 2px solid #e91e63;
    box-shadow: none;
  }
</style>
{% endblock %}
  
{% block content%}
    <!-- 谷歌直接搜索即可找到本页样式 -->
    <!-- 另一风格 https://gist.github.com/osfx/94bc9084a0484ef2ee3d -->
    <div class="section"></div>
    <center>
      <img class="responsive-img" style="width: 250px;" src="https://i.imgur.com/ax0NCsK.gif" />
      <!-- 不使用本地静态文件 -->
      <!-- <img class="responsive-img" style="width: 500px;" src="{{ url_for('static', filename='header.jpg') }}" /> -->
      <div class="section"></div>
      {% if error%}
      <h5 class="indigo-text">错误！请再次登录</h5>
      {% else %} 
      <h5 class="indigo-text">请登录你的账户</h5>
      {% endif %}
      <div class="section"></div>

      <div class="container">
        <div class="z-depth-1 grey lighten-4 row" style="display: inline-block; padding: 32px 48px 0px 48px; border: 1px solid #EEE;">

          <form class="col s12" method="post">
            <div class='row'>
              <div class='col s12'>
              </div>
            </div>

            <div class='row'>
              <div class='input-field col s12'>
                <input class='validate' type='email' name='email' id='email' />
                <label for='email'>输入邮箱</label>
              </div>
            </div>

            <div class='row'>
              <div class='input-field col s12'>
                <input class='validate' type='password' name='password' id='password' />
                <label for='password'>输入密码</label>
              </div>
              <label style='float: right;'>
                <a class='pink-text' href='#!'><b>忘记密码?不会帮你找回的:)</b></a>
              </label>
            </div>

            <br />
            <center>
              <div class='row'>
                <button type='submit' name='btn_login' class='col s12 btn btn-large waves-effect indigo'>登录</button>
              </div>
            </center>
          </form>
        </div>
      </div>
      <a href="#!">创建账户 - 暂不支持</a>
    </center>

    <div class="section"></div>
    <div class="section"></div>
{% endblock %}